import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
    StyleSheet,
    View,
    Text
} from 'react-native';

import Font from '../../config/theme/standard/fonts';
import Color from '../../config/theme/standard/color';

const deg = number => `${number}deg`;

function Disabled(props) {
    let { radius, disabledText } = props.data;
    let diameter = radius * 2;
    return (
        <View
            style={[
                styles.circle,
                {
                    width: diameter,
                    height: diameter,
                    borderRadius: radius
                }
            ]}
        >
            <Text style={styles.text}>{disabledText}</Text>
        </View>
    );
}

function RightTransformer(props) {
    let { radius, rotate, color, percent } = props.data;
    let diameter = radius * 2;
    let half = percent >= 50;

    let rightTransformerDegree = deg(half ? 180 : percent * 3.6);

    return (
        <View
            style={[
                styles.leftWrap,
                {
                    width: radius,
                    height: diameter,
                    left: radius,
                    transform: [
                        { translateX: -radius / 2 },
                        { rotate: deg(rotate) },
                        { translateX: radius / 2 }
                    ]
                }
            ]}
        >
            <View
                style={[
                    styles.loader,
                    {
                        left: -radius,
                        width: radius,
                        height: diameter,
                        borderTopRightRadius: 0,
                        borderBottomRightRadius: 0,
                        backgroundColor: color,
                        transform: [
                            { translateX: radius / 2 },
                            { rotate: rightTransformerDegree },
                            { translateX: -radius / 2 }
                        ]
                    }
                ]}
            />
        </View>
    );
}

function LeftTransformer(props) {
    let { radius, rotate, color, bgcolor, percent } = props.data;
    let diameter = radius * 2;
    let half = percent >= 50;

    let leftTransformerDegree = deg(half ? (percent - 50) * 3.6 : 180);

    return (
        <View
            style={[
                styles.leftWrap,
                {
                    width: radius,
                    height: diameter,
                    left: 0,
                    transform: [
                        { translateX: radius / 2 },
                        { rotate: deg(rotate) },
                        { translateX: -radius / 2 }
                    ]
                }
            ]}
        >
            <View
                style={[
                    styles.loader,
                    {
                        left: radius,
                        width: radius,
                        height: diameter,
                        borderTopLeftRadius: 0,
                        borderBottomLeftRadius: 0,
                        backgroundColor: half ? color : bgcolor,
                        transform: [
                            { translateX: -radius / 2 },
                            { rotate: leftTransformerDegree },
                            { translateX: radius / 2 }
                        ]
                    }
                ]}
            />
        </View>
    );
}

function InnerCircle(props) {
    let {
        radius,
        borderWidth,
        innerColor,
        percent,
        textStyle,
        color,
        children
    } = props.data;

    if (borderWidth < 2) borderWidth = 2;

    return (
        <View
            style={[
                styles.innerCircle,
                {
                    width: (radius - borderWidth) * 2,
                    height: (radius - borderWidth) * 2,
                    borderRadius: radius - borderWidth,
                    backgroundColor: innerColor
                }
            ]}
        >
            {children ? (
                children
            ) : (
                <Text style={[styles.text, ...textStyle,{color:color}]}>{percent}%</Text>
            )}
        </View>
    );
}

export default class ProgressCircle extends Component {
    static propTypes = {
        color: PropTypes.string, // 进度条颜色
        bgcolor: PropTypes.string, // 背景条颜色
        innerColor: PropTypes.string, // 环内区域背景色
        radius: PropTypes.number, //外圆半径
        percent: PropTypes.number, // 进度（百分比分子）
        borderWidth: PropTypes.number, // 环厚度（同心圆半径差值）
        textStyle: PropTypes.array,
        disabled: PropTypes.bool,
        rotate: PropTypes.number // 进度环起点与 12 点方向的夹角 0 - 360 度
    };

    static defaultProps = {
        textStyle: [],
        percent: 0,
        borderWidth: 2,
        bgcolor: "#e3e3e3",
        innerColor: "#fff",
        rotate: 0
    };

    render() {
        let { bgcolor, disabled, radius } = this.props;
        let diameter = radius * 2;

        return disabled ? (
            <Disabled data={this.props} />
        ) : (
            <View
                style={[
                    styles.circle,
                    {
                        width: diameter,
                        height: diameter,
                        borderRadius: radius,
                        backgroundColor: bgcolor
                    }
                ]}
            >
                {/* 右长方形，左半边圆 */}
                <RightTransformer data={this.props} />

                {/* 左长方形，右半圆 */}
                <LeftTransformer data={this.props} />

                {/* 圆环内部 */}
                <InnerCircle data={this.props} />
            </View>
        );
    }
}


const styles = StyleSheet.create({
    circle: {
        overflow: 'hidden',
        position: 'relative',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#e3e3e3',
    },
    leftWrap: {
        // overflow: 'hidden',
        position: 'absolute',
        top: 0,
        // zIndex: 1,
    },
    rightWrap: {
        position: 'absolute',
        // zIndex:1,
    },

    loader: {
        position: 'absolute',
        left: 0,
        top: 0,
        borderRadius: 1000,
        // zIndex: 1
    },

    innerCircle: {
        overflow: 'hidden',
        position: 'relative',
        justifyContent: 'center',
        alignItems: 'center',
    },
    text: {
        fontSize: Font.btnFontSize,
        color: Color.main,
    },
});

